<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hotel  A Hotel category Flat bootstrap Responsive  Website Template | Rooms</title>
<link th:href="@{/css/bootstrap.css}" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Custom Theme files -->
<link th:href="@{/css/style.css}" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/login.js}"></script>
<script th:src="@{/js/jquery.easydropdown.js}"></script>
<script th:src="@{/js/wow.min.js}"></script>
<link th:href="@{/css/animate.css}" rel='stylesheet' type='text/css' />
<script>
	new WOW().init();
</script>
</head>
<body>
	<div class="header">
		<div class="col-sm-8 header-left">
				  <div class="logo">
					 <a href="index.html"><img th:src="@{/images/logo.png}" alt=""/></a>
				  </div>
				  <div class="menu">
					   <a class="toggleMenu" href="#"><img th:src="@{/images/nav.png}" alt="" /></a>
						 <ul class="nav" id="nav">
							 <li ><a th:href="@{/toUserLogin}">首页</a></li>
							 <li class="active"><a href="rooms.html">房间</a></li>
							 <li><a th:href="@{/news.html}">新闻</a></li>
							 <li ><a href="/userOrder/userorder">我的订单</a></li>
							 <li><a th:href="@{/EditUser/allHotel}">旗下酒店</a></li>
							 <li><a th:href="@{/EditUser/findUserId}">个人中心</a></li>
							 <li><a href="404.html">社区</a></li>
							 <div class="clearfix"></div>
						 </ul>
						 <script type="text/javascript" th:src="@{/js/responsive-nav.js}"></script>
				 </div>	
				  <!-- start search-->
				   <div class="search-box">
						 <div id="sb-search" class="sb-search">
							 <form>
								 <input class="sb-search-input" placeholder="请输入你要查询的关键字" type="search" name="search" id="search">
								 <input class="sb-search-submit" type="submit" value="">
								 <span class="sb-icon-search"> </span>
							 </form>
						 </div>
					 </div>
					 <!----search-scripts---->
					 <script th:src="@{/js/classie.js}"></script>
					 <script th:src="@{/js/uisearch.js}"></script>
					 <script>
						 new UISearch( document.getElementById( 'sb-search' ) );
					 </script>
					 <!----//search-scripts---->						
				 <div class="clearfix"></div>
			 </div>
			 <div class="col-sm-4 header_right">
				   <div id="loginContainer"><a href="#" id="loginButton"><img th:src="@{/images/login.png}">
					   <span th:if="${session.user != null}" th:text="${session.user.userName}"></span>
					   <span th:if="${session.user == null}" >登录</span>
					   </a>
					   <a th:href="@{/userLogin/logout}"  style="float: right"><img th:src="@{/images/login.png}"><span>注销</span></a>
						 <div id="loginBox">                
							 <form id="loginForm" > 
									 <fieldset id="body">
										 <fieldset>
											   <label for="email">邮箱</label>
											   <input type="text" name="email" id="email">
										 </fieldset>
										 <fieldset>
												 <label for="password">密码</label>
												 <input type="password" name="password" id="password">
										  </fieldset>
										 <input type="submit" id="login" value="登录">
										 <label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住密码</i></label>
									 </fieldset>
									  <span><a href="#">忘记密码?</a></span>
							   </form>
						   </div>
					  </div>
					  <div class="clearfix"></div>
				  </div>
				 <div class="clearfix"></div>
</div>
<div class="banner">
	  <div class="container_wrap">
		<h1>目的地?</h1>
		   <div class="dropdown-buttons">   
				   <div class="dropdown-button" id="aa">
					   <select name="cityName" id="cityName" class="dropdown"  tabindex="9" data-settings='{"wrapperClass":"metro"}'
							   style="
                   display: block;
                   font-size: 1.4em;
                   padding: 2px 60px 10px 5px;
                   overflow: hidden;
                   white-space: nowrap;
                   text-align: left;
                   font-weight: 300;
                   color: white;
                   border-radius: 1em 1em 1em;
                   background-color: #230d0d;
                   outline-color: transparent;
                   width: 100%">
					   </select>
				 </div>
				 <div class="dropdown-button">
					 <select name="hotelName" id="hotelName" class="dropdown" tabindex="9" data-settings='{"wrapperClass":"metro"}'
							 style="
                    display: block;
                    font-size: 1.4em;
                    padding: 2px 30px 10px 5px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-align: left;
                    font-weight: 300;
                    color: white;
                    border-radius: 3em 3em 3em;
                    background-color:#230d0d;
                    outline-color: transparent;
                    width: 100%">

					 </select>
				   </div>
				 </div>
		  <form th:action="@{/hotelSearch/search}" th:method="POST">
			  <input type="text" value="输入酒店关键字"name="searchhotel"  onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '输入目的地关键字';}"
					 style="margin-right: 0.92em;
              width: 37%;">

			  <label class="btn1 btn-2 btn-2g"><input name="submit" type="submit"  value="搜索"></label>

		  </form>
		  <div class="clearfix"></div>
	   </div>
 </div>
 <div class="content_top">
	   <div class="container">
		 <div class="col-md-4 bottom_nav">
			<div class="content_menu">
			  <ul>
				  <li class="active"><a href="#">评价高</a></li>
				  <li><a th:href="@{/hotelSearch/searchHotelByOrderCount}">预定最多</a></li>
				  <li><a th:href="@{/hotelSearch/searchHotelByOrderTime}">最近预定</a></li>
			  </ul>
		  </div>
	  </div>
	  <div class="col-md-4 content_dropdown1">
		  <span>特色酒店</span>
		  <div class="dropdown-button"  >
			  <select name="hotelType" id="hotelType" class="dropdown" tabindex="9" data-settings='{"wrapperClass":"metro"}'
					  style="
                    display: block;
                    font-size: 1.4em;
                    padding: 2px 30px 10px 5px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-align: left;
                    font-weight: 300;
                    color: white;
                    border-radius: 3em 3em 3em;
                    background-color:#ffbc38;
                    outline-color: transparent;">

			  </select>

		  </div>
	  </div>
	  <div class="col-md-4 filter_grid">
		  <ul class="filter">
			  <li class="fil">类型 :</li>
			  <li><a href=""> <i class="icon1"> </i> </a></li>
			  <li><a href=""> <i class="icon2"> </i> </a></li>
			  <li><a href=""> <i class="icon3"> </i> </a></li>
			  <li><a href=""> <i class="icon4"> </i> </a></li>
			  <li><a href=""> <i class="icon5"> </i> </a></li>
		  </ul>
	  </div>
	 </div>
 </div>
	<div class="living_middle">
		  <div class="container">
			  <div class="row wow fadeInLeft" data-wow-delay="0.4s">
				  <div class="row" style="float: left">

				  </div>
			  </div><br><br>
				  <h2 class="title block-title">房间展示</h2>
			  <div th:each="r:${room}">
				  <div class="col-md-4 wow fadeInLeft  count" data-wow-delay="0.4s">
					  <div class="living_box"><a href="#">
						  <img style="width: 330px;height: 246.83px" th:src="@{'/myfile/room/'+ ${r.roomPicname}}" class="img-responsive" alt=""/>
						  <span class="sale-box">
				   <span class="sale-label">Rooms</span>
				 </span>
					  </a>
						  <div class="living_desc" >
							  <h3 id="hotelName"><a href="#">[[${r.hotelName}]]</a></h3>
							  <p id="hotelType">[[${r.hotelType}]]</p>
							  <a th:href="@{/hotelSearch/detail(id=${r.roomId})}" class="btn3">详情</a>
							  <a th:href="@{/userOrder/toorderinfo(id=${r.roomId})}" class="btn4">预定</a>
							  <p id="roomPrice" class="price">[[${r.roomPrice}]]</p>
						  </div>
						  <table border="1" class="propertyDetails">
							  <tbody>
							  <tr >
								  <td><img th:src="@{/images/area.png}" alt="" style="margin-right:7px;">距离7.2km</td>
								  <td><img th:src="@{/images/bed.png}" alt="" style="margin-right:7px;">[[${r.roomType}]]</td>
								  <td class="countTd"><img th:src="@{/images/drop.png}" alt="" style="margin-right:7px;">剩余数量：<span th:value="${r.roomCount}">[[${r.roomCount}]]</span></td>
							  </tr>
							  </tbody></table>
					  </div>
				  </div>
			  </div>



   	    </div>


		<tr>
			<td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论区：</td>
		</tr>
	<div th:each="c:${room1}">
		<table class="table table-hover" id="mytable">
			<tbody>

			<tr >

				<td th:text="${c.message}" style="padding-left: 20%"></td>
			</tr>
			</tbody>
		</table>
	</div>
   </div>
   <div class="living_bottom">
   	  <div class="container">
   	  	<h2 class="title block-title">Latest Posts</h2>
   	  	<div class="col-md-6 post_left wow fadeInLeft" data-wow-delay="0.4s">
   	  		<div class="mask1"><img th:src="@{/images/pic4.jpg}" alt="image" class="img-responsive zoom-img" /></div>
   	  	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus, sem eget sagittis sagittis, nisl magna sodales eros, ut feugiat velit velit non turpis. Cras eu nibh dapibus justo fringilla   <a href="single.html">More</a></p>
   	  	    <div class="divider"></div>
   	  	    <p class="field-content">30 Sep 2015</span></p>
   	  	</div>
   	  	<div class="col-md-6 post_left wow fadeInRight" data-wow-delay="0.4s">
   	  		<div class="mask1"><img th:src="@{/images/pic5.jpg}" alt="image" class="img-responsive zoom-img" /></div>
   	  	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus, sem eget sagittis sagittis, nisl magna sodales eros, ut feugiat velit velit non turpis. Cras eu nibh dapibus justo fringilla   <a href="single.html">More</a></p>
   	  	    <div class="divider"></div>
   	  	    <p class="field-content">30 Sep 2015</span></p>
   	  	</div>
   	  </div>
   </div>



   <div class="footer">
   	<div class="container">
   	 <div class="footer_top">
   	   <h3>Subscribe to our newsletter</h3>
   	   <form>
		<span>
			<i><img th:src="@{/images/mail.png}" alt=""></i>
		    <input type="text" value="Enter your email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your email';}">
		    <label class="btn1 btn2 btn-2 btn-2g"> <input name="submit" type="submit" id="submit" value="Subscribe"> </label>
		    <div class="clearfix"> </div>
		</span>			 	    
	   </form>
	  </div>
	  <div class="footer_grids">
	     <div class="footer-grid">
			<h4>Ipsum Quis</h4>
			<ul class="list1">
				<li><a href="contact.html">Contact</a></li>
				<li><a href="#">Mirum est</a></li>
				<li><a href="#">Placerat facer</a></li>
				<li><a href="#">Claritatem</a></li>
				<li><a href="#">Sollemnes </a></li>
			</ul>
		  </div>
		  <div class="footer-grid">
			<h4>Quis Ipsum</h4>
			<ul class="list1">
				<li><a href="#">Placerat facer</a></li>
				<li><a href="#">Claritatem</a></li>
				<li><a href="#">Sollemnes </a></li>
				<li><a href="#">Claritas</a></li>
				<li><a href="#">Mirum est</a></li>
			</ul>
		  </div>
		  <div class="footer-grid last_grid">
			<h4>Follow Us</h4>
			<ul class="footer_social wow fadeInLeft" data-wow-delay="0.4s">
			  <li><a href=""> <i class="fb"> </i> </a></li>
			  <li><a href=""><i class="tw"> </i> </a></li>
			  <li><a href=""><i class="google"> </i> </a></li>
			  <li><a href=""><i class="u_tube"> </i> </a></li>
		 	</ul>
		 	<div class="copy wow fadeInRight" data-wow-delay="0.4s">
			  <p> &copy; 2016 Hotel Deluxe. All rights reserved | Design <a href="http://w3layouts.com/">W3layouts</a></p>
<script>

                  //点击城市信息下拉框查询
                  $('#cityName').on('change',function () {
                      var cityName = $(this).val();
                      window.location.href='/cityHotel/hotelView?cityName='+cityName;
                  })

                  //点击酒店信息下拉框查询
                  $('#hotelName').on('change',function () {
                      var hotelName = $(this).val();
                      window.location.href='/cityHotel/roomView?hotelName='+hotelName;
                  })




                     $('#hotelName').change(function () {
                         var hotelId  = $(this).val();
                    window.location.href="/hotel/searchRoom?hotelId="+hotelId;
                     })


			  </script>
	       </div>
		  </div>
		  <div class="clearfix"> </div>
	   </div>
      </div>
	  </div>
</body>
<script>
    window.onload = function(){
        $('#hotelType').on('change',function () {
            var hotelType = $(this).val();
            window.location.href='/hotelSearch/hotelShow?hotelType='+hotelType;
        })

            var counts = $('.count');
            for (var i=0;i<counts.length;i++){
                //debugger;
               // alert(counts[i].querySelector('.countTd'));
				//counts[i].querySelector('.countTd span');
                if(counts[i].querySelector('.countTd span').innerText=='0'){
                    counts[i].querySelector('.btn4').setAttribute('href','#');
                }
            }
        $.ajax({
            async:false,
            type:"POST",
            url:"/cityHotel/cityhotel",
            dataType:"json",
            data:{
                // warehouse: $("#cityName").val(),
            },
            success:function (data) {
                console.log(data);
                $("#cityName").append("<option>"+'选择城市'+"</option>option>");
                for (var i = 0; i<data.length;i++){
                    $("#cityName").append("<option >" + data[i].cityName + "</option>");

                }
            }
        })
        $.ajax({
            async:'true',
            type:"POST",
            url:"/hotelSearch/hotelType",
            dataType:"json",
            data:{
                // warehouse: $("#hotelName").val(),
            },
            success:function (data) {
                console.log(data);
                $("#hotelType").append("<option>"+'选择类型'+"</option>option>");
                for (var i = 0; i<data.length;i++){
                    $("#hotelType").append("<option >" + data[i].hotelType + "</option>");


                }
            }
        })

        $.ajax({
            async:'true',
            type:"POST",
            url:"/cityHotel/hotel",
            dataType:"json",
            data:{
                // warehouse: $("#hotelName").val(),
            },
            success:function (data) {
                console.log(data);
                $("#hotelName").append("<option>"+'选择酒店'+"</option>option>");
                for (var i = 0; i<data.length;i++){
                    $("#hotelName").append("<option >" + data[i].hotelName + "</option>");

                }
            }
        })
    }
</script>
</html>